{% extends 'subpage/main_base.html' %}
{% block title %}工作列表页{% endblock %}
{% block content %}
    <div class="main-content bgc-grey-100">
        <div class="col-md-12">
            <div class="bgc-white bd bdrs-3 p-20 mT-80">
                <h4 class="c-grey-900 mB-20">
                    Task
                    {% if request.user.is_authenticated() %}
                        {% if "app01.add_task" in perms %}
                        <button type="button" class="btn btn-info pull-right create-job" data-toggle="modal"
                                data-target="#taskModal" data-whatever="创建工作">
                            <i class="fa fa-plus"></i>
                            创建工作
                        </button>
                       {% endif %}
                    {% endif %}
                </h4>
                {% if tasks %}
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>用户</th>
                            <th>所属项目</th>
                            <th>所属任务</th>
                            <th>工作描述</th>
                            <th>工作时长</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for task in tasks %}

                            <tr data-line='{"content":"{{ task.content }}","start_time":"{{ task.start_time }}","end_time":"{{ task.end_time }}"}' data-id="{{ task.id }}">
                                <td>{{ task.id }}</td>
                                <td>{{ task.staff_id.first().username }}</td>
                                <td>{{ project_name }}</td>
                                <td>{{ job_name }}</td>
                                <td>{{ task.content }}</td>
                                <td>{{ task.duration }}</td>
                                <td>
                                     {% if "app01.delete_project" in perms  or user_name == task.staff_id.first().username %}
                                    <button class="btn btn-danger" data-target="#deleteModal" data-toggle="modal" data-whatever="{{ task.id }}">删除
                                    </button>
                                    {% endif %}
                                    {% if "app01.change_project" in perms  or user_name == task.staff_id.first().username %}
                                    <button class="btn btn-success edit-job" data-target="#taskModal"
                                            data-toggle="modal" data-whatever="修改工作">修改
                                    </button>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>


                  <ul class="pagination pull-right">
            {% if tasks.has_previous() %}
                <li>
                    <a href="?page={{ tasks.previous_page_number() }}">
                        <i class="fa fa-angle-left" aria-hidden="true"></i>
                    </a>
                </li>
            {% endif %}
            {% for page in paginator.page_range %}
                {{ guess_page(tasks.number,page) }}
            {% endfor %}
            {% if tasks.has_next() %}
                <li>
                    <a href="?page={{ tasks.next_page_number() }}"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
                </li>
            {% endif %}
            <li>
                <a href="?page={{ paginator.num_pages }}">
                    <i class="fa fa-angle-double-right"  aria-hidden="true"></i>
                </a>
            </li>
        </ul>

                {% else %}
                    <p class="text-center text">
                        暂无工作
                    </p>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="modal fade" id="taskModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">创建工作</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <span style="display: none">{{ csrf_token }}</span>
                            <label for="" class="col-xs-2 control-label">所属项目</label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control" name="project_name" disabled value="{{ project_name }}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-xs-2 control-label">所属任务</label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control" name="job_name" disabled value="{{ job_name }}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="jobDescribe" class="col-xs-2 control-label">工作描述</label>
                            <div class="col-xs-10">
                                <textarea name="content" id="jobDescribe" class="form-control" placeholder="工作描述"></textarea>
                                <span class="error-text"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="control-label col-xs-2">工作时间</label>
                            <div class="col-xs-10">
                              <input type="text" name="start_time" id="start_time" onclick="var end = $dp.$('end_time');WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',onpicked:function(){end.click()},maxDate:'%y-%M-%d'})" class="Wdate col-xs-4" style="height: 34px"/>
                              <span class="col-xs-2 link-text">截止</span>
                              <input type="text" name="end_time" id="end_time" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'#F{$dp.$D(\'start_time\')}',maxDate:'%y-%M-%d'})" class="Wdate col-xs-4" style="height: 34px"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary save">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">删除工作</h4>
                </div>
                <div class="modal-body">
                    <h4 class="text-danger">
                        您确定要删除此工作吗?
                    </h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary delete-confirm">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script>
    $(function(){
        window.isEdit = false;
        window.job_id;//用来修改
        $('#taskModal').on('show.bs.modal',function(event){
            var target = $(event.relatedTarget);
            var title = target.data('whatever');
            var modal = $(this);
            modal.find('.modal-title').html(title);
            if(isEdit){//工作的修改
                var data = target.parents('tr').data('line');
                var jobId = target.parents('tr').data('id');
                job_id = jobId;
                modal.find('#jobDescribe').val(data.content);
                console.log(data.start_time);
                console.log(data.end_time);
                modal.find('#start_time').val(data.start_time);
                modal.find('#end_time').val(data.end_time);
            }
        });
        $('.create-job').click(function(){
            isEdit = false;
        });
        $('.edit-job').click(function(){
            isEdit = true;
        });
        $('body').on('click','.save',function(){
            var data = {};
            if(isEdit){//修改
                var content = $('#jobDescribe').val(),start_time = $('#start_time').val(),end_time = $('#end_time').val();
                data = {
                    "task_id":job_id,
                    "content":content,
                    "start_time":start_time,
                    "end_time":end_time
                };
                function success(data){
                    $('#taskModal').modal('hide');
                    window.location.reload();
                }
                function error(){
                    $.myAlert({'title':'出错提示','message':'出错啦'});
                }
                ajaxRequest('POST','{{ url('app01:taskUpdate') }}',data,success,error,'{{ csrf_token }}');
            }else{
                var content = $('#jobDescribe').val(),start_time = $('#start_time').val(),end_time = $('#end_time').val();
                data = {
                    "content":content,
                    "start_time":start_time,
                    "end_time":end_time
                };
                function success(data) {
                    var response = JSON.parse(data);
                    if(response.code === '0'){
                        $('#taskModal').modal('hide');
                        window.location.reload();
                    }else{
                        $.myAlert({'title':'错误提示','message':response.errmsg});
                    }
                }
                function error(ero) {
                    $.myAlert({'title':'错误提示','message':'出错啦!'});
                }
                if(content.length === 0){
                    $.myAlert({'title':'错误提示','message':'请输入工作描述'});
                    return false;
                }
                if(start_time.length === 0){
                    $.myAlert({'title':'错误提示','message':'请输入起始时间'});
                    return false;
                }
                if(end_time.length === 0){
                    $.myAlert({'title':'错误提示','message':'请输入结束时间'});
                    return false;
                }
                ajaxRequest('POST','{{ url('app01:task',args=(job_id,)) }}',data,success,error,'{{ csrf_token }}');
            }
        });

        //删除工作
        $('#deleteModal').on('show.bs.modal',function(event){
            var target = $(event.relatedTarget);
            var taskId = target.data('whatever');
            console.log(taskId);
            $('.delete-confirm').click(function(){
                var data = {
                    "task_id":taskId
                };
                 console.log(taskId);
                function success (data) {
                    var response = JSON.parse(data);
                    if(response.code === '0'){
                        $("#deleteModal").modal('hide');
                        window.location.reload();
                    }else{
                        console.log(response);
                        $.myAlert({'title':'错误提示','messsage':response.errmsg});
                    }

                }
                function error(ero){
                    $.myAlert({'title':'错误提示','message':'出错啦'});
                }
                ajaxRequest('GET','{{ url("app01:taskDelete") }}',data,success,error,'{{ csrf_token }}');
            });
        });
    });

    </script>
{% endblock %}

